<template>
    <div class="draggable-template">
        <el-collapse v-model="activeNames" class="widget-collapse">
            <el-collapse-item name="4" title="数据容器">
                <draggable tag="ul" :list="dataBox"
                           :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
                           :move="checkContainerMove" @end="onContainerDragEnd">
                    <li v-for="(ctn, index) in dataBox" :key="index" class="container-widget-item"
                        :title="ctn.displayName"
                        @dblclick="addContainerByDbClick(ctn)">
                        <p>
                            <svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
                        </p>
                        <p>{{
                           ctn.name
                            }}</p>
                    </li>
                </draggable>
            </el-collapse-item>
            <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
                <draggable tag="ul" :list="containers"
                           :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
                           :move="checkContainerMove" @end="onContainerDragEnd">
                    <li v-for="(ctn, index) in containers" :key="index" class="container-widget-item"
                        :title="ctn.displayName"
                        @dblclick="addContainerByDbClick(ctn)">
                        <p>
                            <svg-icon :icon-class="ctn.icon" class-name="color-svg-icon"/>
                        </p>
                        <p>{{
                            i18n2t(`designer.widgetLabel.${ctn.type}`, `extension.widgetLabel.${ctn.type}`)
                            }}</p>
                    </li>
                </draggable>
            </el-collapse-item>

            <el-collapse-item name="2" :title="i18nt('designer.basicFieldTitle')">
                <draggable tag="ul" :list="basicFields"
                           :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :move="checkFieldMove"
                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                    <li v-for="(fld, index) in basicFields" :key="index" class="field-widget-item"
                        :title="fld.displayName"
                        @dblclick="addFieldByDbClick(fld)">
                        <p>
                            <svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
                        </p>
                        <p>
                            {{
                            i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                            }}
                        </p>
                    </li>
                </draggable>
            </el-collapse-item>

            <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
                <draggable tag="ul" :list="advancedFields"
                           :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :move="checkFieldMove"
                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                    <li v-for="(fld, index) in advancedFields" :key="index" class="field-widget-item"
                        :title="fld.displayName"
                        @dblclick="addFieldByDbClick(fld)">
                        <p>
                            <svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
                        </p>
                        <p>
                            {{
                            i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                            }}
                        </p>
                    </li>
                </draggable>
            </el-collapse-item>

              <el-collapse-item name="4" title="布局">
                <draggable tag="ul" :list="layoutFields"
                           :group="{name: 'dragGroup', pull: 'clone', put: false}"
                           :move="checkFieldMove"
                           :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
                    <li v-for="(fld, index) in layoutFields" :key="index" class="field-widget-item"
                        :title="fld.displayName"
                        @dblclick="addFieldByDbClick(fld)">
                        <p>
                            <svg-icon :icon-class="fld.icon" class-name="color-svg-icon"/>
                        </p>
                        <p>
                            {{
                            i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                            }}
                        </p>
                    </li>
                </draggable>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script>
import SvgIcon from "@/components/svg-icon/index.vue";
import Draggable from 'vuedraggable'
import {
    advancedFields,
    basicFields,
    containers,
    customFields,
    dataBox,
    layoutFields,
} from "@/components/form-designer/widget-panel/widgetsConfig";
import {formTemplates} from './templatesConfig'
import {addWindowResizeHandler} from "@/utils/util";
import axios from "axios";
import i18n from "@/utils/i18n";

export default {
    name: "draggable-template",
    components: {Draggable, SvgIcon},
    mixins: [i18n],
    inject: ['getBannedWidgets', 'getDesignerConfig'],
    props: {
        designer: Object,
        common: Object,
        width: String,
        fVisible: Boolean
    },
    data() {
        return {
            designerConfig: this.getDesignerConfig(),

            activeNames: ['1', '2', '3', '4'],

            containers,
            basicFields,
            advancedFields,
            layoutFields,
            customFields,

            formTemplates: formTemplates,

            scrollerHeight: 0,
            dataBox
        }
    },
    mounted() {
        this.loadWidgets()
        this.scrollerHeight = window.innerHeight - 56 + 'px'
        addWindowResizeHandler(() => {
            this.$nextTick(() => {
                this.scrollerHeight = window.innerHeight - 56 + 'px'
            })
        })
    },
    methods: {
        isBanned(wName) {
            return this.getBannedWidgets().indexOf(wName) > -1
        },

        showFormTemplates() {
            if (this.designerConfig['formTemplates'] === undefined) {
                return true
            }

            return !!this.designerConfig['formTemplates']
        },

        loadWidgets() {
            this.containers = this.containers.map(con => {
                // console.log(con.type)
                return {
                    ...con,
                    displayName: this.i18n2t(`designer.widgetLabel.${con.type}`, `extension.widgetLabel.${con.type}`)
                }
            }).filter(con => {
                return !con.internal && !this.isBanned(con.type)
            })

            this.basicFields = this.basicFields.map(fld => {
                return {
                    ...fld,
                    displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                }
            }).filter(fld => {
                return !this.isBanned(fld.type)
            })

            this.advancedFields = this.advancedFields.map(fld => {
                return {
                    ...fld,
                    displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                }
            }).filter(fld => {
                return !this.isBanned(fld.type)
            })

            this.customFields = this.customFields.map(fld => {
                return {
                    ...fld,
                    displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
                }
            }).filter(fld => {
                return !this.isBanned(fld.type)
            })
        },

        handleContainerWidgetClone(origin) {
            return this.designer.copyNewContainerWidget(origin)
        },

        handleFieldWidgetClone(origin) {
            return this.designer.copyNewFieldWidget(origin)
        },

        checkContainerMove(evt) {
            return this.designer.checkWidgetMove(evt)
        },

        checkFieldMove(evt) {
            return this.designer.checkFieldMove(evt)
        },

        onContainerDragEnd(evt) {
            //console.log('Drag end of container: ')
            //console.log(evt)
        },

        addContainerByDbClick(container) {
            this.designer.addContainerByDbClick(container)
        },

        addFieldByDbClick(widget) {
            this.designer.addFieldByDbClick(widget)
        },

        loadFormTemplate(jsonUrl) {
            this.$confirm(this.i18nt('designer.hint.loadFormTemplateHint'), this.i18nt('render.hint.prompt'), {
                confirmButtonText: this.i18nt('render.hint.confirm'),
                cancelButtonText: this.i18nt('render.hint.cancel')
            }).then(() => {
                axios.get(jsonUrl).then(res => {
                    let modifiedFlag = false
                    if (typeof res.data === 'string') {
                        modifiedFlag = this.designer.loadFormJson(JSON.parse(res.data))
                    } else if (res.data.constructor === Object) {
                        modifiedFlag = this.designer.loadFormJson(res.data)
                    }
                    if (modifiedFlag) {
                        this.designer.emitHistoryChange()
                    }

                    this.$message.success(this.i18nt('designer.hint.loadFormTemplateSuccess'))
                }).catch(error => {
                    this.$message.error(this.i18nt('designer.hint.loadFormTemplateFailed') + ':' + error)
                })
            }).catch(error => {
                console.error(error)
            })
        }

    }
}
</script>

<style scoped lang="scss">

.el-collapse-item ::v-deep ul > li {
  list-style: none;
}

.widget-collapse {
  border-top-width: 0;

  ::v-deep .el-collapse-item__header {
    margin-left: 8px;
    font-style: italic;
    font-weight: bold;
  }

  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;

    ul {
      padding-left: 10px; /* 重置IE11默认样式 */
      margin: 0; /* 重置IE11默认样式 */
      margin-block-start: 0;
      margin-block-end: 0.25em;
      padding-inline-start: 10px;

      &:after {
        content: "";
        display: block;
        clear: both;
      }

      $wh: 60px;

      .container-widget-item, .field-widget-item {
        display: flex;
        height: $wh;
        width: $wh;
        float: left;
        margin: 2px 6px 6px 0;
        cursor: move;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        background: #fff;
        border: 1px solid #e8e9eb;
        padding: 4px;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;

        > p {
          margin: 0;
          text-align: center;
        }
      }

      .container-widget-item:hover, .field-widget-item:hover {
        background: #F1F2F3;
        border-color: $--color-primary;

        .color-svg-icon {
          color: $--color-primary;
        }
      }

      .drag-handler {
        position: absolute;
        top: 0;
        left: 160px;
        background-color: #dddddd;
        border-radius: 5px;
        padding-right: 5px;
        font-size: 11px;
        color: #666666;
      }
    }
  }
}
</style>
